<template>
  <div class="communication">
    <!-- // 标签导航栏 -->
    <div class="navbar">
      <ul>
        <li v-for="item, index of tagList" :class="{ 'tag-active': activeTag == index }" @click="activeTagFunc(index)">
          <span>{{ item.label }}</span></li>
      </ul>
    </div>

    <!-- content -->
    <div class="communication-content">
      <!-- 标签页 -->
      <TabsView />
      <!-- aside -->
      <Aside />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import TabsView from "./components/TabsView/index.vue"
import Aside from "./components/Aside/index.vue"
// navbar tag列表
const tagList = reactive([
  {
    label: '综合',
    name: 'integrated',
  },
  {
    label: '关注',
    name: 'concern',
  },
  {
    label: '后端',
    name: 'backend',
  },
  {
    label: '前端',
    name: 'frontend',
  },
  {
    label: 'Android',
    name: 'android',
  },
  {
    label: 'IOS',
    name: 'ios',
  },
  {
    label: '人工智能',
    name: 'ai',
  },
  {
    label: '开发工具',
    name: 'evelopmentTools',
  },
  {
    label: '代码人生',
    name: 'codingLife',
  },
  {
    label: '阅读',
    name: 'read',
  },
])
// navbar active
const activeTag = ref(0)
const activeTagFunc = (index: number) => {
  activeTag.value = index
}


</script>

<style lang="less" scoped>
@color: #909090; // 默认字体颜色
@border-color: #dcdfe6; //边框默认颜色
@tag-div-hover: #ecf5ff; // 标签盒子hover背景色
@tag-color-hover: #409eff; // 标签盒子hover字体色
@tag-color-active: #409eff; // 标签盒子active字体色

.communication {
  background-color: #f2f3f7;
  .navbar {
    height: 3.833rem;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .05);
    background-color: #fff;

    ul {
      display: flex;
      justify-content: flex-start;
      height: 100%;

      li {
        display: flex;
        height: 100%;
        align-items: center;
        font-size: .9rem;
        padding: 0 1rem;
        color: @color;

      }

      li:hover {
        color: @tag-color-hover;
        background-color: @tag-div-hover;
      }

      .tag-active {
        color: @tag-color-active;
      }
    }
  }

  &-content {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 1rem;
  }

}
</style>